<template>
	<view :style="$theme.pageStyle">
		<view class="bg--w111-f5f5f5 w-full header_box">
			<view class="h-100 px-32 flex-between-center fs-26">
				<!-- //订单状态;0未支付 1待出行 ;2已完成;3-已关闭 -->
				<text :class="orderStatus === 99 ? 'active' : ''" @click="statusClick(99)">全部</text>
				<text :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">未支付</text>
				<text :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待结团</text>
				<text :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">已完成</text>
				<text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">已关闭</text>
				<text :class="orderStatus === 4 ? 'active' : ''" @click="statusClick(4)">待评价</text>
			</view>
		</view>

		<view class="px-20">
			<view class="order_card bg--w111-fff rd-24rpx pt-32 pb-32 pl-24 pr-24" v-for="(item, index) in orderList"
				:key="index" @click="goOrderDetails(item.id)">
				<view class="flex-between-center">
					<view class="flex-y-center">
						<text class="fs-28 lh-40rpx text--w111-333 pl-16">{{item.create_time}}</text>
					</view>
					<view class="fs-26">
						<view class="font-num">
							<text>{{item.status_desc}}</text>
						</view>
					</view>
				</view>
				<view class="mt-26">
					<view class="flex justify-between">
						<view class="flex">
							<u--image :showLoading="true" mode="widthFix" radius="16rpx" :src="item.goods.image"
								width="136rpx" height="136rpx"></u--image>
							<view class="ml-20">
								<view class="w-346 fs-28 text--w111-333 lh-40rpx line2">
									{{item.goods.name}}
								</view>
								<view class="w-346 fs-24 text--w111-999 lh-34rpx line1 mt-12"
									v-if="item.spec_type == 1">
									默认规格
								</view>
								<view class="w-346 fs-24 text--w111-999 lh-34rpx line1 mt-12" v-else>
									{{item.spec.sku_value}}
								</view>
							</view>
						</view>
						<view>
							<view class="base-money weight">
								<text class="symbol" style="font-size: 10px;">￥</text>
								<text class="integer" style="font-size: 16px;">{{ item.total_amount }}</text>
							</view>
							<view class="fs-24 text--w111-999 lh-34rpx text-right">{{item.pay_desc}}</view>
						</view>
					</view>
				</view>

				<view class="h-72 rd-8rpx bg--w111-f5f5f5 mt-26 px-20 flex-between-center">
					<view style="display: flex;">
						<text class="text--w111-333 fs-26">{{item.goods.setout}}</text>
						<view class="aeroplane" style="margin-left: 5px;margin-right: 5px;">
							<uni-icons type="arrow-right" size="16"></uni-icons>
						</view>
						<text class="text--w111-333 fs-26">{{item.goods.destination}}</text>
					</view>
					<view>
						<text class="text--w111-333 fs-26">{{item.goods.departureDuration}}</text>
					</view>
				</view>
				
				<view class="mt-32 flex-between-center">
					<text></text>
					<view class="flex">
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 border_ccc"
							v-if="item.status == 0 || item.status == 3"
							@tap.stop="showModalChange(item.id, 3)">取消订单</view>
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
							v-if="item.pay_status == 0" @click.stop="goPay(item.id)">立即支付</view>
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
							v-else-if="item.status == 2 && item.evaluate == 0" @click.stop="goEvaluate(item)">立即评价</view>
					</view>
				</view>
				
				
			</view>

			<block v-if="orderList.length == 0">
				<emptyPage title="暂无订单信息～"
					src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/331720558653HqBfxJ.gif"></emptyPage>
			</block>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	import $H from '@/common/js/request.js';

	export default {
		components: {
			emptyPage,
		},
		data() {
			return {
				orderStatus: 99, //订单状态
				orderList: [], //订单状态
				isLoading: false,
				page: 1,
				pages: 5, // 示例值
				scroll: false,
				status: 0,
				limit: 15,
			};
		},
		onShow() {
			this.timeer();
		},
		onLoad() {
			
		},
		methods: {
			statusClick(status) {
				if (this.loading) return;
				// if (status === this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.page = 1;
				this.timeer();
			},
			goOrderDetails(id) {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + id
				})
			},
			timeer() {
				this.orderList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.getOrder();
			},
			getOrder() {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/UserOrder', {
						'page': page,
						'limit': this.limit,
						'status': this.orderStatus,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								this.orderList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			},
			goEvaluate(item){
				uni.setStorageSync('Evaluate',item)
				uni.navigateTo({
					url: '/pages/goods/evaluate?order_id=' + item.id
				})
			}
		}
	};
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.border_con {
		border: 1px solid var(--color-primary);
	}

	.border_ccc {
		border: 1rpx solid #ccc;
	}
	
	.bg-color {
		background-color: var(--color-primary) !important
	}

	.active {
		color: var(--color-primary);
		font-weight: 500;
		font-size: 30rpx;
	}
	
	.base-money{
		color: var(--color-primary);
	}
	
	.font-num {
	    color: var(--color-primary) !important;
	}

	.abs-rt {
		position: absolute;
		top: 0;
		right: 0;
	}

	.order_card~.order_card {
		margin-top: 20rpx;

	}

	.btn~.btn {
		margin-left: 16rpx;
	}
	
	.aeroplane{
		image{
			width: 20px;
			height: 20px;
		}
	}
	
</style>